<template>
  <div class="parts">
    <div class="parts-item noselect" v-for="item in items" v-bind:key="item.name">
      {{item.name}}
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'parts',
    data() {
      return {
        items: [
          {
            name: 'house'
          },
          {
            name: 'market'
          },
          {
            name: 'school'
          }
        ]
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .parts
    height 100px
    background-color seagreen
    display flex
    align-items center
    justify-content center
    .parts-item
      width 150px
      height 60px
      line-height 60px
      text-align center
      font-size 18px
      border 1px solid #fff
      color #fff
      border-radius 10px
      cursor default
      & + .parts-item
        margin-left 20px
</style>
